<template>
	<view class="container">
		<!-- 在线报装 -->
		<view class="serviceHall card">
			<!-- 普通用户在线报装 -->
			<uni-card title="在线报装" is-full>
				<u-grid :col="userServiceHallbaseList.length> 3 ? 4:3" :border="false">
					<u-grid-item v-for="(item,index) in userServiceHallbaseList" :key="index"
						@click="CardCkickChange(item)">
						<view class="gridimg" :style="{'background-color': item.color}">
							<img :src="item.name" alt="" />
						</view>
						<text class="grid-text">{{item.title}}</text>
					</u-grid-item>
				</u-grid>
			</uni-card>
			<!-- 管理员用户在线报装 -->
			<!-- <uni-card v-else title="在线报装" is-full>
				<u-grid col="4" :border="false">
					<u-grid-item v-for="(item,index) in adminServiceHallbaseList" :key="index"
						@click="CardCkickChange(item)">
						<view class="gridimg" :style="{'background-color': item.color}">
							<img :src="item.name" alt="" />
						</view>
						<text class="grid-text">{{item.title}}</text>
					</u-grid-item>
				</u-grid>
			</uni-card> -->
		</view>
		<!-- 服务指南 -->
		<view class="handbook card">
			<uni-card title="办事指南" is-full>
				<u-grid :col="handbookbaseList.length > 3 ? 4:3" :border="false">
					<u-grid-item v-for="(item,index) in handbookbaseList" :key="index" @click="CardCkickChange(item)">
						<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon> -->
						<view class="gridimg" :style="{'background-color': item.color}">
							<img :src="item.name" alt="" />
						</view>
						<text class="grid-text">{{item.title}}</text>
					</u-grid-item>
				</u-grid>
			</uni-card>
		</view>
		
		<!-- 我的 -->
		<view class="mine card">
			<uni-card title="我的" is-full>
				<u-grid :col="minebaseList.length > 3 ? 4:3" :border="false">
					<u-grid-item  v-for="(item,index) in minebaseList" :key="index" @click="CardCkickChange(item)">
						<!-- <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon> -->
						<view class="gridimg" :style="{'background-color': item.color}">
							<img :src="item.name" alt="" />
						</view>
						<text class="grid-text">{{item.title}}</text>
					</u-grid-item>
				</u-grid>
			</uni-card>
		</view>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/api.js'
	export default {
		data() {
			return {
				isPhone: false,
				isUser: false, //是否是管理员
				message: '需要注意的是，在使用props属性时，需要将传递的属性设置为props数组中的一项，并使用双引号括住属性名，例如title: String。在子组件中，可以通过this.$props.title的方式获取父组件传递的属性值',
				// 用户在线报装
				userServiceHallbaseList: [
					{
						name: '/static/content/announcement/serviceHall/2.png',
						title: '供水报装',
						color: '#ADF0FF',
						path: '/components/assemble/index'
					}, 
					{
						name: '/static/content/announcement/serviceHall/4.png',
						title: '报修报漏',
						color: '#C1FFB9',
						path: '/components/repairs/index'
					},
					{
						name: '/static/content/announcement/serviceHall/3.png',
						title: '过户更名',
						color: '#FFB9FC',
						path: ''
					},
					{
						name: '/static/content/announcement/serviceHall/1.png',
						title: '水费缴纳',
						color: '#ADF0FF',
						path: ""
					}, 
					{
						name: '/static/content/announcement/serviceHall/5.png',
						title: '自助抄表',
						color: '#ADF0FF',
						path: ''
					},
				],
				// admin在线报装
				// adminServiceHallbaseList: [
				// 	{
				// 		name: '/static/content/announcement/serviceHall/2.png',
				// 		title: '供水报装',
				// 		color: '#ADF0FF',
				// 		path: '/components/assemble/index'
				// 	},
				// 	{
				// 		name: '/static/content/announcement/serviceHall/4.png',
				// 		title: '报修报漏',
				// 		color: '#C1FFB9',
				// 		path: '/components/repairs/index'
				// 	},
				// 	{
				// 		name: '/static/content/announcement/serviceHall/3.png',
				// 		title: '过户更名',
				// 		color: '#FFB9FC',
				// 		path: ''
				// 	},
				// 	{
				// 		name: '/static/content/announcement/serviceHall/1.png',
				// 		title: '水费缴纳',
				// 		color: '#ADF0FF',
				// 		path: ""
				// 	},
				// 	{
				// 		name: '/static/content/announcement/serviceHall/5.png',
				// 		title: '自主抄表',
				// 		color: '#ADF0FF',
				// 		path: ''
				// 	},
				// ],
				// 办事指南
				handbookbaseList: [{
					name: '/static/content/announcement/handbook/0.png',
					title: '用水办事指南',
					color: '#ADF0FF',
					path: '/components/briefIntroduction/index'
				}, {
					name: '/static/content/announcement/handbook/1.png',
					title: '办结事项指南',
					color: '#93FFD6',
					path: '/components/publicity/index'
				},{
					name: '/static/content/announcement/handbook/2.png',
					title: '业务服务指南',
					color: '#8EDEF7',
					path: '/components/reporter/index'
				}, ],
				// 我的
				minebaseList: [
					{
					name: '/static/content/announcement/mine/1.png',
					title: '户号绑定&解绑',
					color: '#ADF0FF',
					path: ''
				}, 
				{
					name: '/static/content/announcement/mine/5.png',
					title: '水费查询',
					color: '#ADF0FF',
					path: ''
				},
				{
					name: '/static/content/announcement/mine/4.png',
					title: '报装进度',
					color: '#ADF0FF',
					path: '/components/ApplicationProcess/index'
				}, {
					name: '/static/content/announcement/mine/4.png',
					title: '维修进度',
					color: '#C1FFB9',
					path: '/components/workOrder/index'
				}, ]
			}
		},
		// computed:{
		// 	isUser(){
		// 		console.log('isUser',this.isUser)
		// 		return this.$store.getters.isUser
		// 	}
		// },
		onLoad() {
			let that = this
			// uni.getStorage({
			// 	key: 'isUser',
			// 	complete(res) {
			// 		that.isUser = res.data.user_role == '1' ? true : false
			// 	}
			// })
			uni.getStorage({
				key: 'isUser',
				complete(res) {
					that.isUser = res.data.dept_id == '103' ? false : true
				}
			})
		},
		mounted() {
			let that = this
			uni.getStorage({
				key: 'isUser',
				complete(res) {
					that.isUser = res.data.dept_id == '103' ? false : true
				}
			})
		},
		methods: {
			/**
			 * 点击事件
			 * item：获取到的跳转地址
			 * isPhone:判断用户是否绑定手机号
			 */
			CardCkickChange(item) {
				this.isPhone = this.$store.state.isPhone
				this.$emit('isPhoneChange', this.isPhone)
				if (!this.isPhone) {
					if (!item.path) {
						this.$refs.uToast.show({
							message: '功能暂未开发，去其他页面看看吧!',
						})
					}
					uni.navigateTo({
						url: item.path,
						success: (res) => {
							console.log('成功', res)
						},
						fail: (res) => {
							console.log('失败', res)
						}
					})
				}

			},
			/**
			 * 办事指南
			 */
			// handbookGrid(item) {
			// 	if (!item.path) return
			// 	uni.navigateTo({
			// 		url: item.path,
			// 		success: (res) => {
			// 			console.log('成功', res)
			// 		},
			// 		fail: (res) => {
			// 			console.log('失败', res)
			// 		}
			// 	})
			// },
			/**
			 * 我的
			 */
			// mineGrid(item) {
			// 	if (!item.path) return
			// 	uni.navigateTo({
			// 		url: item.path,
			// 		success: (res) => {
			// 			console.log('成功', res)
			// 		},
			// 		fail: (res) => {
			// 			console.log('失败', res)
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		display: inline-block;

		>view {
			margin-top: 15rpx;
		}

		.card {
			.uni-card {
				.u-grid {
					.u-grid-item {
						margin-top: 20rpx;
						
						.gridimg {
							width: 70rpx;
							height: 70rpx;
							border-radius: 35rpx;
							// background-color: $uni-color-warning;
							box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 8%;

							img {
								width: 60%;
							}
						}
						.grid-text{
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
</style>